<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="CSS/nomalize.css" />
		<link rel="stylesheet" type="text/css" href="CSS/index.css" />
		<link rel="stylesheet" type="text/css" href="CSS/swiper.min.css" />
	</head>

	<body>
		<section class="wrap">

			<!--头部区域-->
			<header class="header">黑马面面</header>
			<!--导航栏-->
			<nav class="nav">
				<a href="#" class="item">
					<img src="imgs/29.png" />
					<span>HR面试</span>
				</a>
				<a href="#" class="item">
					<img src="imgs/29.png" />
					<span>笔试</span>
				</a>
				<a href="#" class="item">
					<img src="imgs/29.png" />
					<span>技术面试</span>
				</a>
				<a href="#" class="item">
					<img src="imgs/29.png" />
					<span>HR面试</span>
				</a>
				<a href="#" class="item">
					<img src="imgs/29.png" />
					<span>面试技巧</span>
				</a>
				<a href="#" class="item">
					<img src="imgs/29.png" />
					<span>HR面试</span>
				</a>

			</nav>
			<!--go模块-->
			<section class="go">
				<img src="uoload/45.png" />
			</section>

		</section>

		<!--就业指导模块-->
		<section class="content">
			<!--头部-->
			<div class="con-hd">
				<h4>
					<img src="imgs/27.png"/>
					就业指导
				</h4>
				<a href="#" class="more">
					更多
				</a>
			</div>
			<!--旋转木马轮播图模块-->
			<div class="get_job_focus">
				<!-- Swiper -->
				<div class="swiper-container get_job_fo">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="#"><img src="uoload/j.gif" /></a>
							<p>老师教你应对面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="uoload/g.gif" /></a>
							<p>老师教你应对面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="uoload/z.jpeg" /></a>
							<p>老师教你应对面试技巧</p>
						</div>

					</div>
					<!-- Add Pagination -->

				</div>
				<!-- Add Arrows -->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</section>

		<!--充电学习模块-->
		<section class="content study_con">
			<!--头部-->
			<div class="con-hd">
				<h4>
					<img src="imgs/27.png"/>
					充电学习
				</h4>
				<a href="#" class="more">
					更多
				</a>
			</div>
			<!--学习模块轮播图-->
			<div class="study">
				<!-- Swiper -->
				<div class="swiper-container study_fo">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="uoload/ng.gif"/>
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="uoload/s.gif"/>
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="uoload/e.gif"/>
							<h5>说地道英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						
					</div>
					<div class="swiper-pagination"></div>
				</div>

			</div>

		</section>
         
         <footer class="footer">
         	<a href="#" class="item">
         		<img src="imgs/27.png"/>
         		<p>首页</p>
         	</a>
         	<a href="#" class="item">
         		<img src="imgs/27.png"/>
         		<p>模拟面试</p>
         	</a>
         	<a href="#" class="item">
         		<img src="imgs/27.png"/>
         		<p>技术面试</p>
         	</a>
         	<a href="#" class="item">
         		<img src="imgs/27.png"/>
         		<p>首页</p>
         	</a>
         	
         	
         </footer>
         
         
         
		<script src="JS/flexible.js"></script>
		<script src="JS/swiper.min.js"></script>
		<script>
			//			第一个函数里面是 就业指导轮播图 
			(function() {
				var swiper = new Swiper('.get_job_fo', {
					slidesPerView: 2,
					spaceBetween: 30,
					centeredSlides: true,
					loop: true,
					//                  添加左右箭头
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
				});
			})();

			//第二个函数里面是 充电学习轮播图
			(function() {
				var swiper = new Swiper(".study_fo", {
					slidesPerView: 2.2,
					spaceBetween: 20,
					
				});

			})();
		</script>
		
		
	</body>

</html>